/**
 *  @project    Layabox
 *  @file       demo.scss
 *  @brief      reset css styles
 *
 *
 *  @author     liumoran@outlook.com
 *  @version    1.0
 *  @date       2019
*/
@import "./demo.scss";

/*---------------------------*/
/*       Variable            */
/*---------------------------*/
$blue: #3393df;
$gray: #5d5d5d;

/*-----------------*/
/*      style      */
/*-----------------*/
h1{
    margin: 0;
    color: black;
    font-size: 48px;
    line-height: 86px;
}

h2{
    margin-top: 0;
    color:$blue;
    font-size: 42px;
}

h3{
    margin-top: 0;
    color:black;
    font-size: 24px;
}

.p_cont{
    margin-top: 0;
    margin-bottom: 0px;
    color:#5d5d5d;
    font-size: 14px;
    line-height: 24px;
}

/*---------------------------*/
/*      class define         */
/*---------------------------*/
@mixin num_box($width, $color) {
    width: $width;
    height: $width;
    background-color: $color;
    display: inline-block;
    vertical-align: top;
    text-align: center;
    line-height: $width;
}
.num_box{

}

/*---------------------------*/
/*      media                */
/*---------------------------*/
@media screen and ( max-width: 340px){
    h1{
        font-size: 36px;
    }
}


/*------------------*/
/*      layout      */
/*------------------*/

/*  1. flash   */
.flash_part{
    .flash{
        padding-top: 60px;
        padding-bottom: 60px;
    }
    background-color: #8bc01f;

    .flash_title{
        padding-top: 8px;
        padding-bottom: 18px;
        .num_box{
            @include num_box(53px,white );
            h1{
                color: #8bc01f;
            }
        }
        h1{
            line-height: 54px;
            color: white;
            text-indent: 10px;
        }
    }
    h3{
        line-height: 36px;
        color:white;
        margin-bottom: 40px;
    }
    p{
        line-height: 30px;
        color: white;
        margin-bottom: 30px;
    }
    .img_box{
        width: 100%;

        img{
            width: 100%;
        }
    }
    .button{
        width: 100px;
        height: 34px;
        background-color: #fff;
        text-align: center;
        border-radius: 4px;
        p{
            line-height: 34px;
            color: #8bc01f;
        }
    }

}
/*  2. player   */
.player_part{
    background-color: $blue;
    padding: 60px 15px;
    .player_title{
        padding-top: 14px;
        padding-bottom: 18px;
        .num_box{
            @include num_box(44px, white );
            p{
                color: $blue;
                font-size: 40px;
                line-height: 44px;
            }
        }
        h1{
            color: white;
            line-height: 44px;
            text-indent: 10px;
        }
    }

    .player_info{
        h3{
            margin-top: 30px;
            color: white;
            font-weight: normal;
        }
        p{
            line-height: 30px;
            color: white;
        }
    }

    .img_box{
        width: 100%;
        font-size: 0;
        img{
            width: 100%;
        }
    }
    .img20k{
        margin-top: 120px;
    }
}
/*  3/4. air/open   */
.AirOpe_part{
    background-color: #fff;
    padding-top: 80px;
    padding-bottom: 80px;
}
/*  5/6. store/pub  */
.StoPub_part{
    background-color: #f7f7f7;
    padding-top: 80px;
    padding-bottom: 80px;
}
/*  com_style 3/4/5/6   */
.standard{
    .standard_title_area{
        padding-top: 11px;
        padding-bottom: 24px;
        .num_box{
            @include num_box(42px, $blue );
            p{
                color: white;
                font-size: 36px;
                line-height: 40px;
            }
        }
        h1{
            color: $blue;
            line-height: 42px;
            text-indent: 10px;
        }
    }
    h3{
        font-size: 18px;
        color: #787878;
        line-height: 18px;
        font-weight: normal;
    }
    .h3_blue{
        color: #3393df;
        margin-top: 36px;
    }
    .p_cont{
        height: 50px;
        line-height: 25px;
        text-indent: 2em;
    }
    .icon_box{
        margin: 40px auto 0 auto;
        width: 150px;
        img{
            width: 100%;
        }
    }

}
